<template>
  <div class="home_card">
    <div class="user_card">
      <div class="header_img">
        <img :src="userImg" alt="">
        <div class="card_top">
          <div class="user_info">
          <span class="user_name">用户名: {{userName}}</span>
          <div class="user_lv">等级: Lv {{userLv}}</div>
          <TButton class="edit_button" type="warn" content='编辑' size="mini" @click="test" />
          </div>
          <div class="user_fow">
          <div>动态
            <div>{{userEvent??0}}</div>
          </div>
          <div>关注<div>{{follows?.length??0}}</div></div>
           <div>粉丝<div>{{followeds?.length}}</div></div>
          </div>

        </div>
        <div class="card">
          <div>个人介绍：{{signature}}</div>
          <div>所在地区：{{city}}</div>
          <span>年龄：{{userAge}}</span>
        </div>
      </div>
    </div>
    <div class="card_title">
    <div>
    听歌排行
    <span>累计听歌{{playCount}}首</span>
    </div>
    <div class="spans">
    <span @click="" >
    最近一周 |</span>
        <span @click="">
    所有时间</span>
    </div>

    </div>
    <div class="card_content">
      <Tlist :songList="songlist" iconName="icon-yinle1" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import TButton from '@/base-ui/TButton/src/TButton.vue';
import { useStore } from '@/store';
import { ref,computed} from 'vue'
import emitterHome from "@/utils/mittEvent"
import Tlist from '@/base-ui/TList/src/TList.vue';
const store = useStore()


//emitterHome.emit("homeUserInfo", store.state.main.singUrl);
const userId = ref('')
emitterHome.all.clear();

const playCount = ref(0)


const userImg = computed(()=>store.state.home.userInfo.avatarUrl)

const userEvent = computed(()=>store.state.home.userFans.userEvent)
const follows = computed(()=>store.state.home.userFans.follows)
const followeds = computed(()=>store.state.home.userFans.followeds)
const userName = computed(() => store.state.home.userInfo.nickname)

const userLv = computed(() => store.state.home.userInfo.vipType)

const signature = computed(() => store.state.home.userInfo.signature)

const userAge = computed(() => store.state.home.userInfo.birthday)

const city = computed(() => store.state.home.userInfo.city)

// const userName = computed(() => store.state.home.userInfo.nickname)

// const avaImg = computed(() => store.state.login.userInfo.avatarUrl)


emitterHome.on("homeUserInfo", (userId) => {

  //  store.dispatch('home/getHomeUserInfo',userId)
  // userName.value = store.state.home.userInfo.userName
  // userLv.value = store.state.home.userInfo.vipType
  // signature.value = store.state.home.userInfo.signature
  // city.value = store.state.home.userInfo.city
  // userAge.value = store.state.home.userInfo.birthday
  // followeds.value = store.state.home.userFans.followeds
  // follows.value = store.state.home.userFans.follows

});

const test = ()=>{
// emitterHome.emit("homeUserInfo", 1212315);
//  store.dispatch('home/getHomeUserInfo',userId)


store.dispatch('home/getHomeFans',527813169)
  store.dispatch('home/getHomeUserInfo',527813169)
}
test()



const songlist = store.state.main.userPlayList



</script>
<style lang="less" scoped>
.home_card{
  margin: auto;
  width: 900px;
  height: 830px;
  .card_title{
    padding-top: 28px;
  margin-top: 250px;
  width: 900px;
  height: 60px;
  position: absolute;
  div > span {
    margin-left: 20px;
    font-size: 16px;
    font-weight: 650;
  }
  div{
    margin-left: 30px;
    font-size: 18px;
    font-weight: 650;
  }
  .spans{
    margin-top: -24px;
    margin-left: 660px;
    font-size: 15px;
    font-weight: 650;
  }
}
.card_content{
  margin-top: 310px;
  margin-left: 50px;
  width: 800px;
  height: 500px;
  position: absolute;
}
}
.user_card{
  position: absolute;
  margin: auto;
  width: 900px;
  height: 250px;

    .header_img{
    display: flex;
    margin-left: 30px;
    margin-top: 20px;
    width: 160px;
    height: 160px;
    background-color: rgb(199, 199, 240);
    .card_top{
      position: absolute;
      margin-left: 200px;
      width: 600px;
      height: 120px;
      background-color: rgb(195, 220, 230);
    }
  }
  .card{
    position: absolute;
    width: 600px;
    height: 90px;
    margin-left: 200px;
    margin-top: 120px;
    background-color: rgb(136, 156, 241);
  }
}

.edit_button{
 position: absolute;
 margin-left: 500px;
 margin-top: 15px;
}
.user_info{
  height: 60px;
  background-color: cornflowerblue;
  border-bottom: 3px solid rgb(177, 77, 6);
  .user_name{
    margin-left: 30px;
    margin-top: 10px;
    font-size: 20PX;
    font-weight: 500;
    position: absolute;
  }
  .user_lv{
    position: absolute;
    width: 150px;
    margin-left: 300px;
    margin-top: 18px;
  }
}
.user_fow{
div{
  font-size: 18px;
  font-weight: 600;
  display: inline;
  padding: 30px;
}
}
.card{
        font-size: 14px;
  font-weight: 600;
  div{

  padding: 3px;
  }
  span{
margin-left: 30px;
  }
}

</style>
